<template>
  <div class="maincontent">
    <el-tabs v-model="activeName">
      <el-tab-pane label="图件审查" name="first">
        <!-- <mapView
          :projectId="projectId"
          :fileSelectionList="drawingList"
          :linkName="linkName"
          :firstLinkName="firstLinkName"
        ></mapView>-->
        <div class="tdMap-box">
          <threeMap @throwPickObj="getPickObj" class="three-map" ref="threeMap">
            <template slot="buttonGroup">
              <el-dropdown class="tjsc-dropdown" @command="handleDropDownView">
                <el-button class="line" size="medium">
                  图件审查
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in drawingList"
                    :key="index"
                    :command="index"
                  >{{ item.fileName }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template slot="projectDialog">
              <mapView
                ref="mapView"
                :projectId="projectId"
                :fileSelectionList="drawingList"
                :linkName="linkName"
                :firstLinkName="firstLinkName"
              ></mapView>
            </template>
          </threeMap>
        </div>
      </el-tab-pane>
      <el-tab-pane label="附件审查" name="second">
        <annexReview
          ref="annexReview"
          :projectId="projectId"
          :attachmentsList="attachmentsList"
          :linkName="linkName"
          :firstLinkName="firstLinkName"
        ></annexReview>
      </el-tab-pane>
    </el-tabs>

    <div class="exportAdvice" @click="handleCheckReviewOpinion" v-if="!isCurrentProcess">
      <i class="el-icon-document-checked"></i>校验审查意见
    </div>
    <div class="exportAdvice1" @click="exportDrawingOpinion">
      <i class="el-icon-upload2"></i>导出审查意见
    </div>

    <!-- <div class="chooseExport" v-if="showExport">
      <div class="centerBox">
        <el-radio-group v-model="exportFlag" class="raGroup">
          <el-radio :label="1">内业复审意见</el-radio>
          <el-radio :label="2">外业复审意见</el-radio>
        </el-radio-group>
        <div class="btn">
          <el-button @click="exportDrawingOpinion" type="primary">确定</el-button>
          <el-button @click="exportDrawingOpinion(0)">取消</el-button>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import mapView from "./checks/mapView";
import annexReview from "./checks/annexReview";
import threeMap from "@/components/threeMap";
import {
  getFileDetail,
  exportDrawingOpinions,
  exportAnnexOpinions,
  recheckReviewOpinion
} from "@/api/earlyMapping/countryAuditAdvice";
import { submitProcessComeback } from "@/api/common.js";
export default {
  components: {
    mapView,
    annexReview,
    threeMap
  },
  data() {
    return {
      projectId: Number(localStorage.getItem("projectId") * 1),
      firstLinkName: "PRE_PROJECTING_DIST_FIRST_TRIAL", // 环节名称
      linkName: "PRE_PROJECTING_CITY_CENTER_REVIEW", // 环节名称
      activeName: "first",
      drawingList: [], // 图件列表
      attachmentsList: [], // 附件列表
      showExport: false,
      exportFlag: 1
    };
  },

  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") == "PRE_PROJECTING_CITY_CENTER_REVIEW";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },

  created() {
    this._initData();
  },
  methods: {
    exportReviewOpinions() {
      switch (this.activeName) {
        case "first":
          this.showExport = true;
          break;
        case "second":
          exportAnnexOpinions({
            linkId: this.linkName,
            projectId: this.projectId
          }).then(res => {
            let contentType = localStorage.getItem("contentType");
            if (contentType == "application/octet-stream;charset=UTF-8") {
              this.fileDownload(res, "附件审查意见(复审).xlsx");
            } else {
              this.$message.warning("暂无数据可导出!!!");
            }
          });
          break;
        default:
      }
    },
    exportDrawingOpinion() {
      exportDrawingOpinions({
        linkName: this.linkName,
        projectId: this.projectId,
        // auditType: 2
      }).then(res => {
        this.fileDownload(res, "图件审查意见(复审).zip");
      });
      // if (flag !== 0) {
      //   if (this.exportFlag === 1) {
      //     exportDrawingOpinions({
      //       linkName: this.linkName,
      //       projectId: this.projectId,
      //       auditType: 1
      //     }).then(res => {
      //       this.fileDownload(res, "图件内业审查意见(复审).zip");
      //     });
      //   } else if (this.exportFlag === 2) {
      //     exportDrawingOpinions({
      //       linkName: this.linkName,
      //       projectId: this.projectId,
      //       auditType: 2
      //     }).then(res => {
      //       this.fileDownload(res, "图件外业审查意见(复审).zip");
      //     });
      //   }
      // }
      // this.showExport = false;
    },
    fileDownload(data, fileName) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      // 创建隐藏的可下载链接
      var eleLink = document.createElement("a");
      eleLink.download = fileName; // 必须携带格式的名称  比如  app.text 或者 index.html
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([data]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      loading.close();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    // 获取文件详情数据
    _getFileDetail() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getFileDetail(this.projectId)
        .then(res => {
          if (res.data.drawings) {
            this.drawingList = res.data.drawings; // 图层文件列表
          }
          if (res.data.attachments) {
            this.attachmentsList = res.data.attachments; // 图层文件列表
          }
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },
    //校验审查意见
    handleCheckReviewOpinion: function() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      recheckReviewOpinion({ projectId: this.projectId }).then(res => {
        loading.close();
        if (res.data && res.data.resultList) {
          var length = res.data.resultList.length;
          this.$confirm(
            `存在${length}条审查意见未通过,是否回退到上一步流程？`,
            "回退确认",
            {
              distinguishCancelAndClose: true,
              closeOnClickModal: false,
              confirmButtonText: "回退",
              cancelButtonText: "不回退",
              lockScroll: true,
              type: "warning"
            }
          )
            .then(() => {
              const loading1 = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
              });
              let params = {
                link: "PRE_PROJECTING_CITY_CENTER_REVIEW",
                projectId: this.projectId
              };
              submitProcessComeback(params)
                .then(res => {
                  loading1.close();
                  this.$message.success("回退成功！");
                  setTimeout(() => {
                    this.$router.push(
                      "/projectManagement/planningStage/dealwith"
                    );
                  }, 1000);
                })
                .catch(() => {
                  loading1.close();
                });
            })
            .catch(action => {
              if (action == "cancel") {
                setTimeout(() => {
                  this.$router.push(
                    "/projectManagement/planningStage/dealwith"
                  );
                }, 1000);
              }
            });
        } else {
          this.$message.success("操作成功！");
          setTimeout(() => {
            this.$router.push("/projectManagement/planningStage/dealwith");
          }, 1000);
        }
      });
    },
    handleDropDownView(index) {
      let item = this.drawingList[index];
      if (!item.fileId) {
        // 查看红线
        this.$refs.threeMap.getHxData(item);
      } else {
        // 查看现状图
        this.$refs.threeMap.handleXzView(item);
      }
    },
    getPickObj(e) {
      this.$refs.mapView.getPickObj(e);
    },
    // 初始化数据
    _initData() {
      this._getFileDetail();
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  box-sizing: border-box;
  background: #ffffff;
  height: calc(100vh - 114px);
  padding: 0 24px;
  position: relative;
  .exportAdvice {
    position: absolute;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: #737373;
    height: 36px;
    right: 170px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      width: 12px;
      margin-right: 3px;
    }
  }
  .exportAdvice1 {
    position: absolute;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: #737373;
    height: 36px;
    right: 60px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .chooseExport {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    .centerBox {
      width: 300px;
      height: 180px;
      background: #fff;
      box-shadow: 0px 3px 10px #000;
      padding: 50px 30px;
      line-height: 36px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      .raGroup {
        display: flex;
      }
      .btn {
        margin-top: 30px;
      }
    }
  }
}
</style>
